.article-item{
  width: 100%;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  &:not(:last-child){
    border-bottom: 1px solid rgba(178,186,194,.15);
  }
  &:hover{
    background-color: rgba(0,0,0,.02);
  }
  .info-box{
    .meta-list{
      display: flex;
      align-items: baseline;
      font-size: 12px;
      color: #b2bac2;
      white-space: nowrap;
      li {
        &:not(:last-child){
          &::after{
            content: '·';
            margin: 0 5px;
            color: #b2bac2;
          }
        }
        a {
          color: #b2bac2;
          @extend %hover;
        }
      }
    }
    .info-title{
      @include maxWidthEllipsis(590px);
      margin: 6px 0 12px;
      a{
        font-size: 16px;
        font-weight: 600;
        color: #2e3135;
        &:hover{
          color: #2e3135;
          text-decoration: underline;
        }
      }
    }
    .operion-box{
      display: flex;
      align-items: center;
      .item{
        padding: 0 9px;
        font-size: 12px;
        line-height: 24px;
        color: #b2bac2;
        border: 1px solid #edeeef;
        cursor: pointer;
        &:hover{
          background-color: #f7f8fa;
        }
        &:not(:nth-child(1)){
          margin-left: -1px;
        }
        &.active{
          color: $theme-color;
        }
        .anticon {
          font-size: 14px;
        }
        .count{
          margin-left: 3px;
        }
      }
    }
  }
  .ant-image{
    flex: 0 0 auto;
    margin-left: auto;
    .info-img{
      object-fit: cover;
    }
  }
}